//这种写法，一般用于学习React的基本知识点。
// console.log(React);
// console.log(ReactDOM);

// 创建一个类组件：
class LikeButton extends React.Component {

  //1. 构造器：
  constructor(porps) {
    super(porps)
    // 声明组件组件的状态，类似vue的data属性
    this.state = {
      liked: false
    }
  }

  //2 渲染函数
  render() {
    if (this.state.liked) {
      return '你们喜欢我'
    }

    // 在reander方法里面种，return之前，是可以写一部的逻辑的
    //3 必须使用return 返回一个react的元素，或者是jsx写的。
    return React.createElement(
      'button',
      {
        type: 'button', onClick: () => {
          // 修改状态的方式：
          this.setState({ liked: true })
        }
      },
      '点我就表示喜欢')
  }
}

// index.html页面的挂载点。
// v 17的写法：
// const domContainer = document.querySelector('#app');
// 通过ReactDOM.render()把LikeButton组件，挂载到给节点上（#app）。
// ReactDOM.render(React.createElement(LikeButton), domContainer)

// v 18.2
const domContainer = document.querySelector('#app');
// 创建一个更组件
const root = ReactDOM.createRoot(domContainer)
// 渲染目标组件到根组件里面。
root.render(React.createElement(LikeButton))
